vlwkaos' digital garden

React Hooks

useEffect

DOM의 레이아웃 배치와 페인트가 끝난 후 호출됨. 그렇기 때문에 상태에 의존적인 UI는 타닥 하고 바뀌는 것처럼 보여질 수 있다.

useLayoutEffect

useEffect와 비슷하나 DOM mutation이후에 동기적으로 발생함. DOM의 layout을 읽으면서 re-render하기 위함.

useMemo / useCallback

  • memoized callback
    • dependency값에 따른 callback 함수 반환, optimized child components 반환용도. 그니까 render props 넘기는 그런거
  • memomized value deps에 따른 함수가 아닌 expression를 반환. 반복 계산을 막아줌.

useContext

<MyContext.Provider> 로 감싸진 하위 컴포넌트에서 컨텍스트의 value props를 전달 받는 용도. memo랑 상관없이 값이 바뀌면 rerender가 한번은 발생한다.

useReducer

const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState); 
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

dispatch가 arrow function이라도 rerender되지 않도록 최적화 되어있음.

[[React - custom Hooks]]

  • 전역 상태관리를 할 때 언제 hook으로 값을 가져오고 언제 props로 전달하는게 맞을지에 대한 고민

Referred in

React Hooks